<template>
	<view>
		<!-- 筛选 -->
		<view class="search">
			<view class="house">
				<view class="uni-title">房屋信息</view>
				<view class="house-picker">
					<picker @change="floorChange" :value="fr" :range="options" range-key="floor">
						<view style="margin-right: 30rpx;position: relative;">
							<input type="text" disabled/>
							<text class="input-overflow">{{options[fr].floor}}</text>
							<text class="picker-btn"><uni-icons :size="16" class="uni-icon-wrapper" color="#666" type="arrowdown" /></text>
						</view>
					</picker>
					<picker @change="unitChange" :disabled="unitShow" :value="ut" :range="units" range-key="unit">
						<view style="margin-right: 30rpx;position: relative;">
							<input type="text" disabled/>
							<text class="input-overflow">{{units[ut].unit}}</text>
							<text class="picker-btn"><uni-icons :size="16" class="uni-icon-wrapper" color="#666" type="arrowdown" /></text>
						</view>
					</picker>
					<picker @change="numberChange" :disabled="numberShow" :value="nr" :range="numbers" range-key="number">
						<view style="position: relative;">
							<input type="text" disabled/>
							<text class="input-overflow">{{numbers[nr].number}}</text>
							<text class="picker-btn"><uni-icons :size="16" class="uni-icon-wrapper" color="#666" type="arrowdown" /></text>
						</view>
					</picker>
				</view>
			</view>
			<view class="date">
				<view class="uni-title">日期选择</view>
				<view class="title" @click="dateChange"><input type="text" :value="date" placeholder="请选择日期"/></view>
			</view>
			<view class="btn">
				<view class="btn-width" @click="reset">
					<view v-show="restBtn">
						<image style="width: 160px;height: 35px;" src="../../static/button/rest-a.png"></image>
					</view>
					<view v-show="!restBtn">
						<image style="width: 160px;height: 35px;" src="../../static/button/rest-b.png"></image>
					</view>
				</view>
				<view class="btn-width" @click="search" style="margin-right: -16rpx;">
					<view v-show="searchBtn">
						<image style="width: 160px;height: 35px;" src="../../static/button/search-a.png"></image>
					</view>
					<view v-show="!searchBtn">
						<image style="width: 160px;height: 35px;" src="../../static/button/search-b.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="list">
			<view class="item" @click="info">
				<view class="title">
					<view class="h1">润华商厦/1单元/1001</view>
					<view class="info">
						<view class="h2">
							<text>上次抄表数：</text>
							<text>40</text>
						</view>
						<view class="h2">
							<text>抄表日期：</text>
							<text>2019-01-02</text>
						</view>
					</view>
				</view>
				<view class="list-btn">
					<uni-icons :size="20" class="uni-icon-wrapper" color="#609ee9" type="arrowright" />
				</view>
			</view>
			<view class="item" @click="info">
				<view class="title">
					<view class="h1">润华商厦/1单元/1001</view>
					<view class="info">
						<view class="h2">
							<text>上次抄表数：</text>
							<text>40</text>
						</view>
						<view class="h2">
							<text>抄表日期：</text>
							<text>2019-01-02</text>
						</view>
					</view>
				</view>
				<view class="list-btn">
					<uni-icons :size="20" class="uni-icon-wrapper" color="#609ee9" type="arrowright" />
				</view>
			</view>
			<view class="item" @click="info">
				<view class="title">
					<view class="h1 text-overflow">润华商厦/1单元/1001GAJFGJASKGFAJKGFAJGHSDFGJAGFAHF</view>
					<view class="info">
						<view class="h2">
							<text>上次抄表数：</text>
							<text>40</text>
						</view>
						<view class="h2">
							<text>抄表日期：</text>
							<text>2019-01-02</text>
						</view>
					</view>
				</view>
				<view class="list-btn">
					<uni-icons :size="20" class="uni-icon-wrapper" color="#609ee9" type="arrowright" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import youScroll from '@/components/your-scroll/your-scroll.vue'
	export default {
		components: {
			uniList,
			uniListItem,
			uniIcons,
			youScroll
		},
		data() {
			return {
				options: [{
						floor: '润华商厦',
						children: [{
								unit: '1单元',
								children: [{
									number: '1001'
								},{
									number: '1002'
								},{
									number: '2001'
								},
								{
									number: '2002'
								}]
							},
							{
								unit: '2单元',
								children: [{
									number: '1001'
								},{
									number: '1002'
								},{
									number: '1003'
								},
								{
									number: '1004'
								}]
							}
						]
					},
					{
						floor: 'A栋',
						children: [{
								unit: '1单元',
								children: [{
									number: '1001'
								},{
									number: '1002'
								},{
									number: '2001'
								},
								{
									number: '2002'
								}]
							},
							{
								unit: '2单元',
								children: [{
									number: '1001'
								},{
									number: '1002'
								},{
									number: '1003'
								},
								{
									number: '1004'
								}]
							},
							{
								unit: '3单元',
								children: [{
									number: '1001'
								},{
									number: '1002'
								},{
									number: '2001'
								},
								{
									number: '2002'
								}]
							}
						]
					},
					{
						floor: 'B栋',
						children: [{
								unit: '1单元',
								children: [{
									number: '1001'
								},{
									number: '1002'
								},{
									number: '2001'
								},
								{
									number: '2002'
								}]
							},
							{
								unit: '2单元',
								children: [{
									number: '1001'
								},{
									number: '1002'
								},{
									number: '1003'
								},
								{
									number: '1004'
								}]
							}
						]
					},
					{
						floor: 'jHGFFGSAJFGAJGFJHDGFAHJFGAHSDFGHSAFGFGAHSFD',
						children: [{
								unit: 'FSDJAGFJAHGFDHF单元',
								children: [{
									number: 'FJHASGFKJGSFFGASFHDGASF'
								},{
									number: '1002'
								},{
									number: '2001'
								},
								{
									number: '2002'
								}]
							},
							{
								unit: '2单元',
								children: [{
									number: '1001'
								},{
									number: '1002'
								},{
									number: '1003'
								},
								{
									number: '1004'
								}]
							}
						]
					}
				],
				units: [],
				unitShow: false,
				numbers: [],
				numberShow: false,
				fl: '',
				un: '',
				nu: '',
				value: '',
				date: '',
				fr: 0,
				ut: 0,
				nr: 0,
				drawerShow: false,
				list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				searchBtn: true,
				restBtn: true,
			}
		},
		onReady() {
			// console.log(this.$refs.scroll)
		},
		onLoad () {
			this.options[0].children.forEach((item,index) => {
				this.units.push(item);
			})
			this.units[0].children.forEach((item,index) => {
				this.numbers.push(item);
			})
			this.units.unshift({unit: '请选择单元'});
			this.numbers.unshift({number:'请选择房号'});
			this.options.unshift({floor: '请选择楼座'});
		},
		methods: {
			reset () {
				this.fr = 0;
				this.ut = 0;
				this.nr = 0;
				this.date = '';
				this.fl = '';
				this.un = '';
				this.nu = '';
				this.restBtn = false,
				setTimeout(() => {
					this.restBtn = true
				},100)
			},
			search () {
				this.searchBtn = false;
				setTimeout(() => {
					this.searchBtn = true
				},100)
			},
			floorChange: function(e) {
				this.fr = e.target.value;
				let that = this;
				if (this.fr != 0) {
					this.units = [];
					this.fl = this.options[that.fr].floor;
					this.options[that.fr].children.forEach((item,index) => {
						that.units.push(item);
					})
					this.units.unshift({unit: '请选择单元'});
					this.numbers.unshift({number:'请选择房号'});
					this.ut = 0;
					this.nr = 0;
				}
			},
			unitChange: function(e) {
				// console.log('picker发送选择改变，携带值为：' + e.target.value)
				this.ut = e.target.value;
				let that = this;
				if (this.ut != 0) {
					this.numbers = [];
					this.units[that.ut].children.forEach((item,index) => {
						that.numbers.push(item);
					})
					this.un = this.units[that.ut].unit;
					this.numbers.unshift({number:'请选择房号'});
					this.nr = 0;
				}
			},
			numberChange: function(e) {
				// console.log('picker发送选择改变，携带值为：' + e.target.value)
				this.nr = e.target.value;
				let that = this;
				if (this.nr != 0) {
					this.nu = this.numbers[that.nr].number;
				}
			},
			onPullDown(done) { // 下拉刷新
				setTimeout(() => {
					this.list = [1,2,3,4,5,6,7,8,9,10];
					done(); // 完成刷新
				},1000*1)
			},
			onScroll(e) { // 监听滚动
				console.log(e.detail.scrollTop)
			},
			onLoadMore(e) { // 加载更多
				setTimeout(() => {
					let len = this.list.length;
					for (let i = 1; i <= 10; i++) {
						this.list.push(len + i);
					}
				},1000*1)
			},
			scrollTo() {
				this.$refs.scroll.goTop();
			},
			info () {
				setTimeout(() => {
					dd.navigateTo({
						url: '../meterReading-info/meterReading-info'
					});
				},10);
			},
			dateChange () {
				let that = this;
				dd.datePicker({
				  format: 'yyyy-MM',
				  success: (res) => {
				    that.date = res.date
				  },
				});
			}
		},
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4
	}
	
	view {
		font-size: 28rpx;
		line-height: inherit
	}
	.search {
		position: relative;
		padding: 30rpx;
		padding-right: 40rpx;
		background-color: #FFFFFF;
		padding-left: 22rpx;
	}
	.btn {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
		width: 100%;
	}
	.list {
		margin-top: 20rpx;
	}
	.list .item {
		padding: 30rpx;
		margin-bottom: 1px;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.list-btn {
		font-weight: bold;
		text-align: right;
		width: 10%;
		margin-right: -15rpx;
	}
	.content {
		text-align: center;
		height: 100%;
	}
	.block {
		height: 200px;
		line-height: 200px;
		text-align: center;
		margin: 10px;
		background-color: aquamarine;
	}
	.house input {
		background-color: #FFFFFF;
		width: 100%;
		border-radius: 6rpx;
		padding: 10rpx 0rpx;
		padding-left: 10rpx;
		font-size: 28rpx;
		border: 1px #ececec solid;
		color: #666;
	}
	.date input {
		background-color: #FFFFFF;
		width: 99.5%;
		border-radius: 6rpx;
		padding: 10rpx 5rpx;
		padding-left: 10rpx;
		font-size: 28rpx;
		border: 1px #ececec solid;
		color: #666;
	}
	.house-picker {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	.btn-width {
		height: 35px;
	}
	.h2 {
		color: #999;
	}
	.picker-btn {
		position: absolute;
		top: 10%;
		right: 5%;
	}
	.info {
		display: flex;
		justify-content: space-between;
	}
	.item .title {
		width: 90%;
	}
	.text-overflow {
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		vertical-align: middle;
		/*如下为超出隐藏显示为省略号的核心代码*/
		overflow: hidden;    /* 内容超出宽度时隐藏超出部分的内容 */
		text-overflow: ellipsis;    /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
		word-break: keep-all;    /* 不换行 */
		white-space: nowrap;    /* 不换行 */
	}
	.input-overflow {
		position: absolute;
		left: 10rpx;
		top: 20rpx;
		width: 77%;
		height: 32rpx;
		line-height: 32rpx;
		vertical-align: middle;
		/*如下为超出隐藏显示为省略号的核心代码*/
		overflow: hidden;    /* 内容超出宽度时隐藏超出部分的内容 */
		text-overflow: ellipsis;    /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
		word-break: keep-all;    /* 不换行 */
		white-space: nowr
	}
</style>

